<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function checkPhone(){
            let phone = document.getElementById("phone").value;
            let regExp = /^[1][34589]\d{9}$/;
            if(regExp.test(phone)){
                document.getElementById("s1").innerHTML = "<span style='color:green;'>手机号码格式正确</span>";
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red;'>手机号码格式有误</span>";
            }
        }
        function checkEmail(){
            let email = document.getElementById("email").value;
            let regExp = /^[0-9a-z]\w+[@][0-9a-z]+(\.com)(\.cn)?$/i;
            if(regExp.test(email)){
                document.getElementById("s2").innerHTML = "<span style='color:green;'>电子邮箱格式正确</span>";
            } else{
                document.getElementById("s2").innerHTML = "<span style='color:red;'>电子邮箱格式有误</span>";
            }
        }
        function checkIdcard(){
            let idcard = document.getElementById("idcard").value;
            let regExp = /^\d{15}(\d{2}[0-9X])?$/;
            if(regExp.test(idcard)){
                document.getElementById("s3").innerHTML = "<span style='color:green;'>身份证号码格式正确</span>";
            } else{
                document.getElementById("s3").innerHTML = "<span style='color:red;'>身份证号码格式有误</span>";
            }
        }
    </script>
</head>
<body>
<!--
    手机号码由11位数字组成
    且必须以13、14、15、18、19开头
-->
<input type="text" id="phone">
<button onclick="checkPhone()">校验手机号码</button>
<span id="s1"></span><br>
<hr>
<!--
    邮箱必须以英文字母或数字开头
    后面可以是英文字母数字或者下划线
    后面跟@符号
    @符号后面可以是英文字母或者数字
    最终以.com或者.com.cn结尾
-->
<input type="text" id="email">
<button onclick="checkEmail()">校验电子邮箱</button>
<span id="s2"></span><br>
<hr>
<!--
    身份证号码由15或者18位字符组成
    如果是15位,则全部都是数字
    如果是18位,可以是全部数字
    也可能前17位是数字,最后以X结尾
-->
<input type="text" id="idcard">
<button onclick="checkIdcard()">校验身份证号码</button>
<span id="s3"></span><br>

</body>
</html>